<template>
  <a-card :bordered="false" :style="{ height: '100%' }">
    <h2>本页面内容均为测试功能，暂不提供稳定性保证</h2>
    <a-divider />
    <div class="form-test">
      <h4>输入框自动补全</h4>
      <a-form :form="form" layout="vertical">
        <a-form-item :wrapper-col="{ span: 24 }">
          <icon-selector
            v-decorator="['icon', { initialValue: '', rules: [{ validator: validateIcon }] }]"
            @change="handleSelectIcon"
            ref="iconSelector"
          />
        </a-form-item>
        <a-form-item label="Radio Button Label" :wrapper-col="{ span: 24 }">
          <a-radio-group v-model="value">
            <a-radio-button v-for="(item, index) in data" :key="index" :value="item.key">{{
              item.firstName
            }}</a-radio-button>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </div>
    <div class="drawer-test">
      <h4>抽屉</h4>
      <a-button @click="openFormDrawer">表单抽屉</a-button>
      <form-drawer ref="formDrawer" />
    </div>
    <div class="pagination-test">
      <h4>分页</h4>
      <ssx-table />
    </div>
    <a-table :dataSource="data">
      <a-table-column-group>
        <span slot="title" style="color: #1890ff">Name</span>
        <a-table-column dataIndex="firstName" key="firstName">
          <span slot="title" style="color: #1890ff">First Name</span>
        </a-table-column>
        <a-table-column title="Last Name" dataIndex="lastName" key="lastName" />
      </a-table-column-group>
      <a-table-column title="Age" dataIndex="age" key="age" />
      <a-table-column title="Address" dataIndex="address" key="address" />
      <a-table-column title="Tags" dataIndex="tags" key="tags">
        <template v-slot="tags">
          <span>
            <a-tag v-for="tag in tags" color="blue" :key="tag">{{ tag }}</a-tag>
          </span>
        </template>
      </a-table-column>
      <a-table-column title="Action" key="action">
        <template slot-scope="text, record">
          <span>
            <a>Action 一 {{ record.firstName }}</a>
            <a-divider type="vertical" />
            <a>Delete</a>
          </span>
        </template>
      </a-table-column>
    </a-table>
  </a-card>
</template>

<script>
import IconSelector from './test/IconSelector'
import FormDrawer from './test/FormDrawer'
import SsxTable from '../auth/modules/STable'

const data = [
  {
    key: '1',
    firstName: 'John',
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: '2',
    firstName: 'Jim',
    lastName: 'Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser']
  },
  {
    key: '3',
    firstName: 'Joe',
    lastName: 'Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
]

export default {
  name: 'Test',
  data() {
    return {
      form: this.$form.createForm(this),
      data,
      value: '1'
    }
  },
  mounted() {
    this.$nextTick(() => {
      const {
        form: { setFieldsValue }
      } = this
      setFieldsValue({ icon: null })
    })
  },
  methods: {
    handleSelectIcon(icon) {
      this.$message.info('')
    },
    validateIcon(rule, value, callback) {
      if (value === null) {
        callback()
      }
      if (!this.$refs.iconSelector.validateIcon(value)) {
        callback(new Error('图标库中无此图标'))
      }
      callback()
    },
    openFormDrawer() {
      this.$refs.formDrawer.showDrawer()
    }
  },
  components: {
    IconSelector,
    FormDrawer,
    SsxTable
  }
}
</script>

<style scoped></style>
